<template>
 <div class="header">
   <div class="header-left">
     <span class="iconfont back-icon">&#xe60f;</span>
   </div>
   <div class="header-input">
     <span class="iconfont">&#xe66d;</span>
     请输入城市/旅游景点
   </div>
   <router-link to="/City">
     <div class="header-right">
      {{this.city}}
      <span class="iconfont">&#xe673;</span>
     </div>
   </router-link>

 </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  name: 'HomeHeader',
  computed: {
    ...mapState(['city'])
  }
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="stylus" scoped>
@import '~@/assets/styles/veribles.styl'
   .header
    line-height : $headerHight
    display :flex
    background-color: $bgColor
    color:#fff
    .header-left
    width :.64rem
    float :left
    text-align center
     .back-icon
       text-align center
       font-size .4rem
    .header-input
     flex:1
     line-height .64rem
     height .64rem
     background-color #fff
     border-radius .1rem
     margin-top .12rem
     margin-left .2rem
     padding-left .2rem
     color #ccc
   .header-right
    min-width :1.04rem
    padding 0 .1rem
    float :right
    text-align center
    color #fff

</style>
